<template>
  <div class="cart_wrapper">
    <div class="header">
      <div class="viewname">购物车</div>
      <div class="more">更多</div>
    </div>

    <CardItem
      v-for="item in cart"
      :key="item.id"
      :data="item"
      @increment="increment"
      @decrement="decrement"
      @selectItem="selectItem"
    ></CardItem>
    <div class="settlement">
      <div
        :class="[{ select_all: !allItemSelect }, 'select_all_select']"
        @click="selectAll"
      >
        全选
      </div>
      <div class="settlement_l">
        合计:
        <div class="heji">￥{{ caculateAll }}</div>
        <div class="caculate">结算</div>
      </div>
    </div>
  </div>
</template>

<script>
import { computed } from "vue";
import { useStore, mapGetters } from "vuex";
import CardItem from "../../components/CardItem/index.vue";
export default {
  components: {
    CardItem,
  },
  setup() {
    const { commit, state } = useStore();

    // 减少商品
    const decrement = (data) => {
      commit("decrement", data);
    };

    // 增加商品
    const increment = (data) => {
      commit("increment", data);
    };

    // 选则商品
    const selectItem = (data) => {
      commit("select", data);
    };

    const allItemSelect = computed(() => {
      let res = false;
      state.cart.forEach((item) => {
        if (item.selected !== true) {
          res = true;
        }
      });
      return res;
    });
    const selectAll = () => {
      commit("seletAll", allItemSelect.value);
    };

    return {
      selectAll,
      decrement,
      increment,
      selectItem,
      allItemSelect,
      cart: state.cart,
    };
  },
  computed: {
    ...mapGetters(["caculateAll"]),
  },
};
</script>

<style scoped>
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  padding: 20px;
  border-radius: 20px;
  margin-bottom: 20px;
}
.viewname {
  font-size: 50px;
  font-weight: 700;
}
.more {
  color: rgb(29, 28, 28);
}
.cart_wrapper {
  margin-bottom: 160px;
}
.settlement {
  display: flex;
  box-sizing: border-box;
  padding: 20px;
  position: fixed;
  height: 130px;
  left: 0;
  right: 0;
  bottom: 80px;
  align-items: center;
  background: #fff;
  justify-content: space-between;
  font-size: 30px;
}
.settlement_l {
  display: flex;

  justify-content: center;
  align-items: center;
}
.select_all {
  background: #ff5000;
  padding: 10px;
  color: #fff;
  border-radius: 10px;
}
.select_all_select {
  border: 1px solid #ccc;
  padding: 20px;
  border-radius: 20px;
}
.heji {
  color: #ff5000;
}
.caculate {
  background: #ff5000;
  padding: 20px 40px;
  color: #fff;
  border-radius: 60px;
  margin-left: 20px;
}
</style>